<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta元数据,charset字符集,utf-8解决中文乱码 -->
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>永和小票</title>
    <!-- 样式设计 -->
    <style>
        body{
            width: 313px;
            font-size: 10px;/*字体大小*/
        }
        /* 对应单独样式进行设置 */
        .please{
            font-size: 24px;
            font-weight: bold;/*字体加粗*/
        }
        .self{
            /* padding 修饰4周(上右下左),空 */
            padding-left: 80px;/*与左边空一定距离*/
        }
        /* solid 实线  dashed 虚线*/
        hr{
            border: 1px dashed;
        }
        .note{
            /*内边距
             padding-top: 20px ; 
            padding-bottom: 15px; */
            /* 外边距 */
            margin-top: 20px;
            margin-bottom: 15px;
        }
        img{
          margin-left: 30px;   
        }
    </style>
</head>
<body>
    <!-- div标签会自动换行 -->
    <div>顾客联</div>
    <div class="please">请您留言取餐账单号</div>
    <div class="self">自取顾客联</div>
    <div>永和大王（北三环西路店）</div>
    <div>010-21323131</div>
    <div class="self">--结账单--</div>
    <div class="please">账单号:P000010</div>
    <div>账单类型:堂食</div>
    <div>人数:1</div>
    <div>收银员:张静</div>
    <div>开单时间:2018-04-12 07:34:34</div>
    <div>结账时间:2018-09-29 09:23:23</div>

    <!-- 表格是没有列概念，它叫做单元格 -->
    <!-- border 代表的边框的线粗度  tr为行 td为列 -->
    <!-- 表格是没有列概念，它叫做单元格
        页面中换行会被解析一个空格
        <br/>是一个换行符
        align横向排列：left 居左 center 居中 right 局右 
        valign纵向的排列:top 居上 、center 居中 、bottom居下
        <hr/>为实线
        
    -->
    <table border="0">
        <tr>
            <td width='50' >数量</td>
            <td width='190'>品项</td>
            <td width='50' align="center">金额</td>
        </tr>
        <tr>
            <td valign='top'>1</td>
            <td >玉米肉松蛋饼2p<br/>
                1 x -- 玉米肉松蛋饼<br/>
                1 x -- 现磨豆浆（热/甜）
            </td>
            <td valign='top' align="right">8.00</td>
        </tr>
    </table>
        <hr/>
    <table border="0">
        <tr>
            <td width="246">合计</td>
            <td width="50" align="right">8.00</td>
        </tr>
        <tr>
            <td>微支付</td>
            <td align="right">8.00</td>
        </tr>
    </table>
    <hr/>
    <div>打印时间:2020-08-18 09:34:34</div>
    <hr/>
    <!-- &nbsp; 空格 -->
    <div class="note">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，
        如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，
        根据指引步骤开具您的增值税电子普通发票。
        此二维码30天有效，扫描时请保持小票平整。

    </div>
    <!-- 引入图片 
        src配置图片来源,相对路径,
        只设置宽度,高度会自动算,等比缩放, 只设置高度,宽度会自动算,等比缩放
        两个都设置,不会等比
    -->
    <img src="images/1612252372.png" alt="" width="150"/>

    <div>官网:www.yonghe.com.cn</div>
    <div>加盟热线: 86-23-231232113</div>
    <br/>
    <br/>
</body>
</html>